<template>
	<view class="header">
		<view class="text">我的</view>
		<view class="listfun">
			<image @click="tosearsch" class="img1" src="@/static/search.png" mode="widthFix"></image>
			<image v-if="!isShoushujias" @click.stop="showshujia" src="../../static/shujia.png" mode="widthFix"></image>
			<image v-else @click.stop="showhistory" src="@/static/time.png" mode="widthFix"></image>
			<image @click="guanlishu" src="@/static/list.png" mode="widthFix"></image>
		</view>
	</view>
	<view class="caozuolan">
		
	</view>
	<view v-if="isShoushujias">
		<view class="title">书架</view>
		<view class="contents" v-if="shujiadata.data.length>0">
			<view class="imgContext" v-for="(item,index) in shujiadata.data" :key="index">
				<view class="img" v-if="item&&item?.id!='undefined'">
					<image @click="getxiangqing(item.id)" :src="item.img"></image>
				</view>
				<view class="text" v-if="item&&item?.id!='undefined'">
					<view class="text1">
						{{item.name}}
					</view>
					<view class="text2">
						{{item.author}}
					</view>
					<view class="text3">{{item.content}}</view>
				</view>
			</view>
		</view>
	</view>
	<view v-else>
		<view class="title">
			<view class="text">历史记录</view>
			</view>
		<view class="contents" v-if="histiory.data.length>0">
			<view class="imgContext" v-for="(item,index) in histiory.data" :key="index">
				<view class="img" v-if="item&&item?.id!='undefined'">
					<image @click="getxiangqing(item.id)" :src="item.img"></image>
				</view>
				<view class="text" v-if="item&&item?.id!='undefined'">
					<view class="text1">
						{{item.name}}
					</view>
					<view class="text2">
						{{item.author}}
					</view>
					<view class="text3">{{item.content}}</view>
				</view>
			</view>
		</view>
	</view>
	<view v-show="isShowtuijian">
	<view class="title" > 推荐</view>
	<view class="contents" v-if="tuijiandatas.data.length>0">
		<view class="imgContext" v-for="(item,index) in tuijiandatas.data" :key="index">
			<view class="img" v-if="item&&item?.id!='undefined'">
				<image @click="getxiangqing(item.id)" :src="item.img"></image>
			</view>
			<view class="text" v-if="item&&item?.id!='undefined'">
				<view class="text1">
					{{item.name}}
				</view>
				<view class="text2">
					{{item.author}}
				</view>
				<view class="text3">{{item.content}}</view>
			</view>
		</view>
	</view>
	</view>
	<view class="mengban" v-if="isShowmengban">
		<view class="gongneng">
			<view @click.stop="selectAll" :style="`color:${cheAll?'#000000':'#f50f50'};`">全选</view>
			<view @click.stop="mengbanfalse">完成</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="contents" v-if="selectdatas.data.length>0">
			<view class="imgContext" v-for="(item,index) in selectdatas.data" :key="index">
				<view class="img" v-if="item&&item?.id!='undefined'">
					<image @click="getxiangqing(item.id)" :src="item.img"></image>
				</view>
				<view class="text" v-if="item&&item?.id!='undefined'">
					<view class="text1">
						{{item.name}}
					</view>
					<view class="text2">
						{{item.author}}
					</view>
					<view class="text3">{{item.content}}</view>
				</view>
				<view class="select">
					<label>
						<checkbox class="chebox" @click="chanstate(index,item.isremove)"  :checked="item.isremove" /><text></text>
					</label>
				</view>
			</view>
		</view>
		<view class="remove" @click="removedata">删除</view>
		<view style="height: 180rpx;"></view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		randomdata
	} from '@/api/api.js'
	import {
		reactive,ref
	} from "vue";
	import {
		useStore
	} from 'vuex';
	import {
		selecthistory,
		selectshujia,
		removeshujia,
		removehistory,
		selecttheme
	} from '@/api/users.js'
	let store = useStore()
	let tuijiandatas = reactive({
		data: []
	})
	let isShowtuijian = ref(true)
	let isShowmengban=ref(false)
	let isShoushujias = ref(true)
	randomdata().then(res => {
		tuijiandatas.data = res.data
	})
	const showhistory = ()=>{
		isShoushujias.value = false
	}
	const showshujia=()=>{
		isShoushujias.value = true
	}
	const getxiangqing = (id) => {
		store.commit('updatexiangqing', id)
		uni.navigateTo({
			url: '/pages/xiangqing/xiangqing'
		});
	}
	const tosearsch = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	let userid = store?.state?.users?.id
	let histiory = reactive({
		data: []
	})
	selecthistory(userid).then(res => {
		histiory.data = res.data
	})
	let shujiadata = reactive({
		data: []
	})
	let selectdatas = reactive({
		data:[]
	})
	const guanlishu=()=>{
		selectdatas.data=[]
		isShowmengban.value=true
		isShowtuijian.value = false
		if(isShoushujias.value){
			shujiadata.data.forEach(item=>{
				if(item!=null){
				item.isremove = false
				selectdatas.data.push(item)
				}
			})
		}else{
			histiory.data.forEach(item=>{
				if(item!=null){
					item.isremove = false
					selectdatas.data.push(item)
				}
			})
		}
	}
	const mengbanfalse = ()=>{
		isShowmengban.value=false
		isShowtuijian.value = true
	}
	let cheAll = ref(false)
	const selectAll = ()=>{
		if(cheAll.value){
			cheAll.value = false
			selectdatas.data.forEach(item=>{
				item.isremove = true
			})
			
		}else{
			cheAll.value = true
			selectdatas.data.forEach(item=>{
				item.isremove = false
			})
		}
	}
	const chanstate= (i,val)=>{
		selectdatas.data[i].isremove = !val
	}
	const removedata = ()=>{
		// console.log(selectdatas.data);
		if(isShoushujias.value){
			let data = []
			selectdatas.data.forEach((item,indexs) =>{
				if(item.isremove){
					removeshujia(userid,item.id).then(res=>{
						uni.showToast({
							title:'删除成功'
						})
					})
				}else{
					data.push(item)
				}
			})
			selectdatas.data = data
			shujiadata.data = data
		}else{
			let data = []
			selectdatas.data.forEach(item =>{
				if(item.isremove){
					removehistory(userid,item.id).then(res=>{
						uni.showToast({
							title:'删除成功'
						})
					})
				}else{
					data.push(item)
				}
			})
			selectdatas.data = data
			histiory.data = data
		}
	}
	onShow(() => {
		isShowtuijian.value = true
		isShowmengban.value = false
		selecthistory(userid).then(res => {
			histiory.data = res.data
		})
		selectshujia(userid).then(res => {
			shujiadata.data = res.data
		})
	})
	
	
	if(userid){
		selecttheme(userid).then((res)=>{
			let theme = res.data.data[0]
			let ss = {}
			ss.textcolor = theme.textcolor,
			ss.bgcolor=  theme.bgcolor,
			ss.size=  theme.size
			store.commit('updatetheme',ss)
		})
	}
</script>

<style lang="scss" scoped>
	.mengban{
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ffffff;
		z-index: 999;
		align-items: center;
		.text {
			width: 450rpx !important;
		}
		.gongneng{
			width: 750rpx;
			padding: 40rpx;
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;
			border-bottom: 1rpx solid #e5e5e5;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9999;
			font-size: 30rpx;
			box-sizing: border-box;
		}
		.remove{
			width: 100vw;
			position: fixed;
			bottom: 0;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #f50f50;
			color: #ffffff;
			text-align: center;
			border-radius: 20rpx;
			z-index: 9999;
		}
		
	}
	.img {
		box-shadow: rgba(0, 0, 0, .2) 0 1px 5px 0px;
	}

	.title {
		width: 710rpx;
		margin: 0 auto;
		font-size: 50rpx;
		font-weight: 600;
		margin-top: 20rpx;
	}


	.contents {
		width: 710rpx;
		margin: 0 auto;
		z-index: 888;
		.imgContext {

			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.text {
				width: 500rpx;
			}

			.text1 {
				margin-top: 5rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #000000;
			}

			.text2 {
				margin-top: 10rpx;
				font-size: 22rpx;
				color: $color3;
			}

			.text3 {
				margin-top: 20rpx;
				colof: #999;
				font-size: 24rpx;
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				color: #2b2b2b;



			}
		}

		image {
			width: 150rpx;
			height: 200rpx;

		}

	}

	.content {
		width: 710rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		>view {
			margin-top: 30rpx;

			image {
				width: 200rpx;

			}

			.text1 {
				width: 200rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: $color3;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1; //行数需设置
				line-clamp: 3;
				-webkit-box-orient: vertical;
			}

			.text2 {
				width: 200rpx;
				font-size: 24rpx;
				color: $color3;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1; //行数需设置
				line-clamp: 3;
				-webkit-box-orient: vertical;
			}
		}

	}

	.header {
		width: 710rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120rpx;
		line-height: 120rpx;

		.text {
			color: $color3;
			font-size: 28rpx;
		}

		.listfun {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			image {
				margin: 0 15rpx;
				width: 50rpx;
			}
			.img1{
				width: 55rpx;
			}
		}
	}
</style>
